<template>
  <!-- 柱状图 -->
  <div class="cbox" :style="`width: ${width};height:${height}`">
    <div class="four" ref="four"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    // legendData: {
    //   type: Array,
    //   default: () => {
    //     return ["模拟数据1", "模拟数据2"];
    //   },
    // },

    xAxisData: {
      type: Array,
      default: () => {
        // return ["街道1", "街道2", "街道3", "街道4", "街道5", "街道6", "街道7"];
        return ["街道1"];
      },
    },

    seriesData: {
      type: Array,
      default: () => {
        return [
          {
            name: "上班时间",
            data: [11],
            stack: "BB",
            type: "bar",
            barWidth: 20,
          },
          {
            name: "下班时间",
            data: [15],
            stack: "BB",
            type: "bar",
            barWidth: 20,
          },
        ];
      },
    },

    width: {
      type: String,
      default: "800px",
    },

    height: {
      type: String,
      default: "700px",
    },
  },
  data() {
    return {};
  },
  methods: {
    initChart() {
      const myChart = echarts.init(this.$refs.four);
      myChart.setOption(this.pieOption);
    },
  },
  mounted() {
    this.initChart();
  },
  updated() {
    this.initChart();
  },
  computed: {
    pieOption() {
      var arr = [];
      this.seriesData.map((item) => {
        arr.push(item.name);
        return arr;
      });
      return {
        backgroundColor: "transparent",
        color: [
          "#0CD3DB",
          "#4386FA",
          "#4FADFD",
          "#488cf7",
          "#38cafb",
          "#4caff9",
          "#646CF9",
          "#4adeca",
          "#2aa7ee",
          "#0270f2",
          "#A098FC",
        ],
        legend: {
          top: "1%",
          textStyle: {
            color: "#90979c",
          },
          data: arr,
        },

        grid: {
          borderWidth: 0,
          top: 85,
          left: 50,
          right: 70,
          bottom: 95,
          textStyle: {
            color: "#fff",
          },
        },

        xAxis: {
          type: "category",
          data: this.xAxisData,
        },
        yAxis: [
          {
            type: "value",
            // name: "%",
            // min: 0,
            // max: 100,
            nameTextStyle: {
              color: "#ccc",
              padding: [0, 0, 10, -30],
            },
            splitNumber: 5,
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                width: 1,
                // 使用深浅的间隔色
                color: ["#566471", "#566471"],
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                fontSize: 12,
              },
            },
          },
        ],

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            textStyle: {
              color: "#fff",
              fontSize: 14,
            },
          },
          axisLine: {
            //x坐标轴轴线
            show: true,
            lineStyle: {
              //x坐标轴轴线样式
              color: "#000", //'#ccc' | 'rgb(128, 128, 128)' | 'rgba(128, 128, 128, 0.5)'，设置标签颜色
            },
          },
          formatter: function (params) {
            console.log(params);
            let str = params[0].name + "<br />";
            console.log(str);
            params.forEach((item) => {
              console.log(item.seriesName);
              if (item.value) {
                if (item.seriesName.indexOf("岁全程接种量") != -1) {
                  str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
                                    "></span>
                                         ${item.seriesName}
                                         :
                                       ${item.value}人  <br/>
                                       `;
                } else if (item.seriesName.indexOf("岁任务数") != -1) {
                  str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
                                    "></span>
                                         ${item.seriesName}
                                         :
                                       ${item.value}人
                                        <br/>`;
                } else {
                  str += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color: ${item.color}
                                    "></span>
                                        ${item.seriesName}
                                        :
                                      ${item.value}%
                                        <br/>`;
                }
              }
            });
            return str;
          },
        },

        toolbox: {
          iconStyle: {
            // color: "#fff",
            borderColor: "#CCC",
          },
          // top: "1%",
          right: "1.5%",
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },

        dataZoom: [
          {
            show: true,
            height: 25,
            xAxisIndex: [0],
            bottom: 18,
            start: 0,
            end: 100,
            handleIcon:
              "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            fillerColor: "rgba(77, 128, 254, 0.2)",
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],

        series: this.seriesData,
      };
    },
  },
};
</script>

<style lang="less" scoped>
.cbox {
  // width: 600px;
  // height: 600px;
}

.four {
  width: 100%;
  height: 100%;
}
</style>
